import { useState } from "react"
import Header from "../header/index"
import "../window/index.scss"
import { customRef } from "../../utils/func"
import { Col, Row, Image, NotificationPlugin, Tooltip } from "tdesign-react"
import React from "react"
import { BASE_URL, BASE_PORT } from "../../utils/config"
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import _ from "lodash"
import { Virtual } from 'swiper/modules';


let data = {
    clientX: 0, clientY: 0,
    endX: 0, endY: 0,
}
let hand = new customRef({
    isDown: false
}, function (e) {
    document.body.style['cursor'] = `${e ? 'move' : 'default'}`;
});

// 数组切片
function chunk_arr(arr, chunkSize = 0) {
    if (chunkSize <= 0) {
        return arr;
    }
    return _.chunk(arr, chunkSize);
}

function Window() {
    const [x, setX] = useState(0)
    const [y, setY] = useState(0)
    const [res, setRes] = useState([])

    function pressDown(e) {
        hand.isDown = true;
        let { clientX, clientY } = { ...e }
        data.clientX = clientX;
        data.clientY = clientY
    }
    function moveEvent(e) {
        if (hand.isDown) {
            let _x = (e.clientX - data.clientX) + data.endX;
            let _y = (e.clientY - data.clientY) + data.endY;
            setX(_x);
            setY(_y);
        }
    }

    function pressUp() {
        if (hand.isDown) {
            hand.isDown = false;
            data.endX = x;
            data.endY = y;
        }
    }
    // 复制
    function copy(str) {
        if (!str) { return }
        let option = null;
        let show_tip = () => {
            if (option.fail) {
                NotificationPlugin.error(option)
            }else{
                NotificationPlugin.success(option)
            }
        }
        if (navigator.clipboard) {
            navigator.clipboard.writeText(str).then(e => {
                option = {
                    title: "复制成功!",
                    content: str
                }
            }).catch(() => {
                option = {
                    title: "失败",
                    fail:true,
                    content: "当前浏览器不支持",
                }
            }).finally(() => {
                show_tip()
            });
        } else {
            let vm_input = document.createElement("textarea");
            vm_input.value = str;
            document.body.appendChild(vm_input);
            vm_input.select();
            document.execCommand("copy");
            document.body.removeChild(vm_input); // 绉婚櫎
            option = {
                title: "复制成功!",
                content: str
            }
            show_tip()
        }
    }

    // pastEvent: function(e) {
    //     let t_hex = this.is_hex;
    //     if (e && e.type === 'paste') {
    //         const items = e.clipboardData.items;
    //         this.is_hex = true;
    //         for (const k in items) {
    //             const val = items[k];
    //             if (val.kind === 'file') {
    //                 let img = val.getAsFile();
    //                 if (img.size > 0) {
    //                     this.render(img, () => {
    //                         this.is_hex = t_hex; // 鎭㈠
    //                     });
    //                 } else {
    //                     console.error("娌℃湁鏁版嵁")
    //                 }
    //             }
    //         }
    //     }


    function selectFile(e) {
        let file = e.target.files
        if (file) {
            file = file[0];
            const formData = new FormData();
            formData.append("file", file);
            fetch(BASE_URL + BASE_PORT, {
                method: "POST",
                body: formData
            }).then(res => res.json())
                .then(res => {
                    if (res) {
                        let _res = chunk_arr(res, 16)
                        setRes(_res);
                    }
                }).catch(err => {
                    NotificationPlugin.error({
                        title: "请求错误",
                        content: "服务器异常" + err,
                        closeBtn: true,
                    })
                })
        }
    }
    return (<>
        <Header></Header>
        <div className="window-conntainer">
            <div className="window-main" style={{
                transform: `translate3d(${x}px,${y}px,0)`
            }}>
                <div className="window-header" onPointerDown={pressDown}
                    onPointerMove={moveEvent}
                    onPointerCancel={pressUp}
                    onPointerLeave={pressUp}
                    onPointerOut={pressUp}
                    onPointerUp={pressUp}
                >
                    <Row className="dot-wrapper" onPointerDownCapture={(e) => { e.stopPropagation(); e.preventDefault(); e.nativeEvent.stopImmediatePropagation() }}>
                        <Col span={4}><span className="window-dot-btn window-dot-btn-1">x</span></Col>
                        <Col span={4}><span className="window-dot-btn window-dot-btn-2">-</span></Col>
                        <Col span={4}><span className="window-dot-btn window-dot-btn-3">+</span></Col>
                    </Row>
                </div>
                <input onChange={selectFile} type="file"></input>
                <div className="picture-room">
                    <Swiper
                        modules={[Virtual]}
                        style={{
                            maxHeight: "100%"
                        }}
                        virtual
                    >
                        {res.map((item, index) => {
                            return (<React.Fragment >
                                <SwiperSlide key={index} virtualIndex={index}>
                                    <div className='picture-wrapper'>
                                        {
                                            item.map((items, idx) => {
                                                return (<React.Fragment key={idx}>
                                                    <div className="picture-items">
                                                        <Image title={items.name} fit="cover" className="picture" src={`${BASE_URL + BASE_PORT}/img?id=${items.path}`}></Image>
                                                        <Tooltip content="双击复制文件名">
                                                            <b onDoubleClick={() => copy(items.name)}>{'文件名：' + items.name}</b>
                                                        </Tooltip>
                                                        <Tooltip content="双击复制文件路径">
                                                            <span onDoubleClick={() => copy(items.path)}>{'路径：' + items.path}</span>
                                                        </Tooltip>
                                                    </div>
                                                </React.Fragment>)
                                            })
                                        }
                                    </div>
                                </SwiperSlide>
                            </React.Fragment>)
                        })}
                    </Swiper>
                </div>
            </div>
        </div>
    </>)
}




export default Window